<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天输入框</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            position: relative;
            -webkit-overflow-scrolling: touch;
        }

        .chat__content {
            height: calc(100% - 40px);
            margin-bottom: 40px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .chat__content p {
            display: inline-block;
            background-color: #ff706f;
            color: #fff;
            font-size: 13px;
            line-height: 22px;
            padding: 11px 15px 10px 16px;
            border-radius: 17px;
            word-break: break-word;
            border-top-left-radius: 0;
            min-width: 20px;
        }

        .input__content {
            display: flex;
            height: 40px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            align-items: center;
        }

        .input__content::after {
            content: "";
            position: absolute;
            border: 1px solid #cccccc;
            top: 0;
            left: 0;
            right: 0;
            transform: scaleY(.5);
        }

        .input__content .input {
            flex-grow: 1;
            word-break: break-all;
            font-size: 14px;
            padding-left: 10px;
        }

        .input__content button {
            width: 50px;
            height: 36px;
            flex-grow: 0;
            flex-shrink: 0;
            border-radius: 2px;
            border: none;
        }

        .input__content .input:focus,
        .input__content button:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <div class="chat__content"></div>
    <div class="input__content">
        <div class="input" contenteditable="true"></div>
        <button>发送</button>
    </div>
    <!-- cdn -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
    <!-- 本地 -->
    <script src="./js/jquery-3.5.0.min.js"></script>
    <script src="./js/uni.webview.1.5.2.js"></script>
    <script>
        document.addEventListener('UniAppJSBridgeReady', function () {
            uni.getEnv(function (res) {
                console.log('当前环境：' + JSON.stringify(res));
            });
            $(function () {
                let temp = ''
                for (let i = 0; i < 12; i++) {
                    switch (i) {
                        case 0:
                            temp += `<div data-index='${i + 1}'><p style='background:#0094ff;'>打开index-vue窗口${i + 1}</p></div>`;
                            break;
                        case 1:
                            temp += `<div data-index='${i + 1}'><p style='background:#ee94ff;'>打开web-video-nvue视频窗口${i + 1}</p></div>`;
                            break;
                        case 2:
                            temp += `<div data-index='${i + 1}'><p style="background:#ffaf00;">春雷播放器${i + 1}</p></div>`;
                            break;
                        case 3:
                            temp += `<div data-index='${i + 1}'><p style="background:#e21918;">uniVideo组件播放器${i + 1}</p></div>`;
                            break;
                        default:
                            temp += `<div data-index='${i + 1}'><p>一些聊天内容${i + 1}</p></div>`;
                            break;
                    }
                }
                $('.chat__content').append(temp);
                $(".chat__content div").each(function (index, item) {
                    $(item).click(function () {
                        let msgType = ''
                        switch (index) {
                            case 0:
                                msgType = "index-vue"
                                break;
                            case 1:
                                msgType = "web-video-nvue"
                                break;
                            case 2:
                                msgType = "chunlei"
                                break;
                            case 3:
                                msgType = "video-component"
                                break;
                        }
                        uni.postMessage({
                            data: {
                                msgType,
                            }
                        });
                    })
                })
            })

            // 判断设备类型
            var judgeDeviceType = function () {
                var ua = window.navigator.userAgent.toLocaleLowerCase();
                var isIOS = /iphone|ipad|ipod/.test(ua);
                var isAndroid = /android/.test(ua);
                var isMiuiBrowser = /miuibrowser/.test(ua);
                var isSafari = /Safari/i.test(ua) && !/Chrome/i.test(ua);

                return {
                    isIOS: isIOS,
                    isAndroid: isAndroid,
                    isMiuiBrowser: isMiuiBrowser,
                    isSafari: isSafari
                }
            }()

            // 获取到焦点元素滚动到可视区
            function activeElementScrollIntoView(activeElement, delay, scrollOption) {
                var editable = activeElement.getAttribute('contenteditable');

                // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
                if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
                    setTimeout(function () {
                        activeElement.scrollIntoView(scrollOption);
                    }, delay)
                }
            }

            // 监听输入框的软键盘弹起和收起事件
            function listenKeybord($input) {
                if (judgeDeviceType.isIOS) {
                    // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
                    $input.addEventListener('focus', function () {
                        console.log('IOS 键盘弹起啦！');
                        // Safari 浏览器，`scrollIntoView` 参数设为 `false`，才使得聊天输入框刚好吸附在输入法上，为 `true` 会往上走一点
                        activeElementScrollIntoView(this, 1000, !judgeDeviceType.isSafari);
                    }, false)

                    // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
                    $input.addEventListener('blur', () => {
                        console.log('IOS 键盘收起啦！');

                        // 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来
                        var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
                        if (!wechatInfo) return;

                        var wechatVersion = wechatInfo[1];
                        var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

                        if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
                            setTimeout(function () {
                                window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
                            })
                        }
                    })
                }

                // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
                if (judgeDeviceType.isAndroid) {
                    var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

                    window.addEventListener('resize', function () {
                        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
                        if (originHeight < resizeHeight) {
                            console.log('Android 键盘收起啦！');

                            // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                            if (judgeDeviceType.isMiuiBrowser) {
                                document.body.style.marginBottom = '0px';
                            }
                        } else {
                            console.log('Android 键盘弹起啦！');

                            // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                            if (judgeDeviceType.isMiuiBrowser) {
                                document.body.style.marginBottom = '40px';
                            }
                            activeElementScrollIntoView($input, 1000, true);
                        }

                        originHeight = resizeHeight;
                    }, false)
                }
            }

            var $inputs = document.querySelectorAll('.input');

            for (var i = 0; i < $inputs.length; i++) {
                listenKeybord($inputs[i]);
            }

        });
    </script>
</body>

</html>